* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

html {
    font-size: 26.66666666666667vw;
    width: 100vw;
}


/* 头部 */

body {
    background-color: rgb(241, 241, 241);
}

header {
    background-color: rgb(255, 132, 29);
    width: 100vw;
    height: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
        width: 5rem;
        height: .8rem;
        margin-left: .50rem;
    }
    .app {
        width: .8rem;
        height: .8rem;
        margin-right: .20rem;
    }
}


/* 搜索框 */

#search {
    background-color: white;
    height: 1.2rem;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    padding: .15rem .20rem;
    box-sizing: border-box;
    border: .04rem solid coral;
    input {
        width: 85%;
        height: 100%;
        border: 0;
        background-color: rgb(241, 241, 241);
        border-radius: .4rem;
        padding-left: .25rem;
    }
    button {
        border: 0;
        background-color: coral;
        border-radius: .4rem;
        width: 14%;
        height: 100%;
        color: white;
        font-size: .3rem;
        text-align: center;
    }
}


/* 品牌排行 */

.ranking {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 1rem;
    background-color: rgb(255, 157, 31);
    border-radius: .05rem;
    align-items: center;
    h1 {
        color: azure;
        padding-left: .15rem;
        font-weight: 400;
    }
    div {
        border: 1px white solid;
        margin-right: .3rem;
        border-radius: 50%;
        width: .5rem;
        height: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
            color: white;
            font-size: .5rem;
            padding-bottom: .05rem;
        }
    }
}


/* 底部 */

#footer {
    background-color: rgb(241, 234, 234);
    overflow: hidden;
    border-bottom: 0;
    .mores {
        width: 80%;
        height: .8rem;
        border: rgb(225, 225, 225) solid .01rem;
        background-color: rgb(247, 247, 247);
        margin: .4rem auto;
        text-align: center;
        box-shadow: #666 0rem 0rem .05rem;
        a {
            color: #000;
            font: .4rem/.8rem "";
            font-family: '宋体';
        }
    }
    .toTop {
        margin: .3rem 0;
        display: flex;
        color: #000;
        width: 100%;
        height: 1rem;
        border: gray 1px solid;
        li {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .4rem;
            a {
                color: #000;
            }
        }
        >li:nth-of-type(2) {
            border-left: gray 1px solid;
            border-right: gray 1px solid;
        }
    }
    >p:nth-of-type(1) {
        width: 70%;
        margin: .1rem auto;
        display: flex;
        justify-content: space-around;
        font-size: .35rem;
        >a:nth-of-type(1) {
            color: red;
        }
        >a:nth-of-type(2) {
            color: #000;
        }
    }
    >p:nth-of-type(2) {
        width: 30%;
        margin: .2rem auto;
        padding-bottom: .6rem;
    }
}